<!-- eslint-disable vue/valid-v-else -->
<template>
  <div class="container">
    <div class="app-container">
      <!-- 角色管理内容 -->
      <div class="role-operate">
        <el-button
          size="mini"
          type="primary"
          @click="dialogFormVisible = true"
        >添加角色</el-button>
      </div>
      <!-- 放置table组件 -->
      <!-- 写表格 -->
      <!-- 放置分页组件 -->

      <el-table style="width: 100%" :data="list">
        <!-- 角色 -->

        <el-table-column
          prop="name"
          label="角色"
          width="180"
          header-align="center"
          align="center"
        >
          <template #default="{ row }">
            <span v-if="show">{{ row.name }}</span>
            <el-input v-else v-model="row.name" size="mini" />

          </template>
        </el-table-column>

        <!-- 启用 -->
        <el-table-column
          prop="state"
          label="启用"
          width="180"
          header-align="center"
          align="center"
        >
          <template #default="{ row }">
            <span v-if="show"> {{ tt[row.state] }}</span>
            <el-switch
              v-else
              v-model="row.state"
              active-color="#13ce66"
              inactive-color="#dcdfe6"
            />
          </template>
        </el-table-column>
        <!-- 描述 -->
        <el-table-column
          prop="description"
          label="描述"
          header-align="center"
          align="center"
          width="500"
        >
          <template #default="{row}">
            <span v-if="show">{{ row.description }}</span>
            <el-input v-else v-model="row.description" size="mini" />

          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column
          prop="id"
          label="操作"
          header-align="center"
          align="center"
        >
          <template #default="{ row }">
            <div v-if="show">
              <el-button type="text">分配权限</el-button>
              <el-button type="text" @click="endit(row)">编辑</el-button>
              <el-button type="text" @click="del(row.id)">删除</el-button>
            </div>
            <div v-else>
              <el-button type="primary" @click="up()">确定</el-button>
              <el-button @click="dex">取消</el-button>

            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" style="height: 60px" align="middle" justify="end">
        <!-- 放置分页组件 -->
        <!-- 写分页 -->
        <el-pagination
          :current-page=" params.page"
          :page-size=" params.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total=" pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </div>
    <el-dialog title="新增角色" :visible.sync="dialogFormVisible" width="500px">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        class="demo-ruleForm"
        size="mini"
      >
        <el-form-item
          label="角色名称"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="启用" :label-width="formLabelWidth">
          <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="#dcdfe6"
          />
        </el-form-item>
        <el-form-item
          label="角色描述"
          :label-width="formLabelWidth"
          prop="description"
        >
          <el-input
            v-model="ruleForm.description"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="out">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getrole, addrole, delrole, inquirerole, editrole } from '@/api/role'
import { tt } from '@/tt'
export default {
  name: 'Role',
  data() {
    return {
      params: {
        pagesize: 10,
        page: 1

      },
      list: [],
      rows: {
        name: '',
        description: '',
        state: '',
        id: ''
      },
      ruleForm: {
        description: '',
        name: '',
        state: ''
      },
      rules: {
        name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
        description: [
          { required: true, message: '请输入角色描述', trigger: 'blur' }
        ]
      },
      pagination: {},
      tt,
      dialogFormVisible: false,
      formLabelWidth: '80px',
      value: true,
      show: true
    }
  },
  created() {
    this.getrole1()
    console.log(this.pagination)
    this.off()
  },
  methods: {
    async getrole1() {
      const { rows } = await getrole()
      this.list = rows
      const role = await inquirerole(this.params)
      this.pagination = role
      // console.log(this.list)
    },
    endit(row) {
      this.show = false
      this.rows = { name: row.name,
        description: row.description,
        state: row.state,
        id: row.id }
    },

    off() {
      if (this.value) {
        this.ruleForm.state = 0
      } else {
        this.ruleForm.state = 1
      }
    },
    async add() {
      if (this.value) {
        this.ruleForm.state = 0
      } else {
        this.ruleForm.state = 1
      }
      await this.$refs.ruleForm.validate()
      await addrole(this.ruleForm)
      this.getrole1()
      this.$message({
        message: '恭喜你，已成功添加角色',
        type: 'success'
      })
      this.$refs.ruleForm.resetFields()
      this.dialogFormVisible = false
    },
    out() {
      this.$refs.ruleForm.resetFields()
      this.dialogFormVisible = false
    },
    dex() {
      this.show = true
      this.getrole1()
    },
    async up() {
      await editrole(this.rows)
      this.$message({
        message: '恭喜你，已成功修改角色',
        type: 'success'
      })
      this.getrole1()
      this.show = true
    },
    async del(id) {
      await delrole(id)
      this.$message.success('已经成功删除')
      await this.getrole1()
    }
  },
  async handleSizeChange(val) {
    this.params.pagesize = val
    await inquirerole(this.params)
  },
  async handleCurrentChange(val) {
    this.params.page = val
    await inquirerole(this.params)
  }
}
</script>
<style scoped>
.role-operate {
  padding: 10px;
}
</style>
